<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人简历</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="swiper-4.5.1/swiper-Swiper4/dist/css/swiper.min.css">
</head>

<body>
    <div class="warper">
        <header>
            <nav class="navbar navbar-expand-lg navbar-light">
                <div class="container">
                    <a class="navbar-brand" href="#"><img src="img/logo.png" /></a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse mr-auto" id="navbarSupportedContent">

                        <form class="form-inline my-2 ml-auto my-lg-0">
                            <!-- <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> -->
                            <ul class="navbar-nav ml-auto">
                                <li class="nav-item active">
                                    <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#jianli">我的简历</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#jineng">技能专长</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#show">作品展示</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#lianxi">联系</a>
                                </li>
                            </ul>
                        </form>
                    </div>
                </div>
            </nav>

            <div class="text-n">
                <div class="container">
                    <p>
                        <img src="img/alex.jpg" alt="">
                    </p>
                    <p>
                        舒服是留给死人的
                    </p>
                    <p>
                        <span>我叫陈欢欢</span>
                        <span>18岁</span>
                        <span>前端工程师</span>
                        <span>手机号：15503028812</span>
                    </p>
                </div>
            </div>
        </header>
        <section>
            <!-- 我 -->
            <div class="jieshao">
                <div class="container">
                    <h3>
                        <span><a name="jianli">关于我</a></span>

                    </h3>
                    <div class="intro">

                        <!-- <p>
                            我叫陈欢欢，来自河北省邯郸市,欢迎大家来我的家乡游玩，<br>今年18岁，
                            我的爱好是玩游戏。
                        </p> -->
                        <ul>
                            <li>姓名：陈欢欢</li>
                            <li>年龄：18</li>
                            <li>学历：大专</li>
                            <li>求职方向：web前端工程师</li>
                        </ul>
                        <ul>
                            <li>电话：15503028812</li>
                            <li>邮箱：2242358711@qq.com</li>
                            <li>毕业学校: 泊头职业学院</li>
                            <li>籍贯：河北省邯郸市</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 专业技能 -->
            <div class="skill">
                <div class="container">
                    <h3>
                        <span><a name="jineng">专业技能</a></span>

                    </h3>
                    <p>
                        IT技术的学习需要持之以恒，对知识的认识深度与广度都很重要。对于前端而言更是如此，近几年前端框架层出不穷，前端技术已经从单纯的静态页面开发慢慢转变成mvc、mvvc等架构型开发，前端工程师正在渐渐向全栈工程师转变，前端开发的重中之重依然是javascript脚本的理解与应用，目前正在不断深入学习javascript知识。
                    </p>
                    <div class="row">
                        <div class="col-md-3 du">
                            <p>
                                <span>80%</span>
                                <span></span>
                            </p>
                            <h4>
                                HTML
                            </h4>
                            <p>
                                深刻理解web标准，熟悉html5新标签语意，能合理利用语意标签布局页面；
                            </p>
                        </div>
                        <div class="col-md-3 du1">
                            <p>
                                <span>75%</span>
                                <span></span>
                            </p>
                            <h4>
                                Javascript
                            </h4>
                            <p>
                                熟悉JavaScript编程语言,
                                有一定的逻辑思维
                            </p>
                        </div>
                        <div class="col-md-3 du2">
                            <p>
                                <span>77%</span>
                                <span></span>
                            </p>
                            <h4>
                                Bootstrap
                            </h4>
                            <p>
                                熟练掌握和运用Bootstrap框架及源码的使用方法
                            </p>
                        </div>
                        <div class="col-md-3 du3">
                            <p>
                                <span>66%</span>
                                <span></span>
                            </p>
                            <h4>
                                css
                            </h4>
                            <p>
                                熟悉css3新特性属性及相关用法，
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 作品展示 -->
            <div class="show">
                <div class="container">
                    <div class="row">
                        <div class="col">
                            <h3>
                                <span><a name="show">作品展示</a></span>
                            </h3>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <img src="img/8.png" alt="">
                            <h4>漫威</h4>
                        </div>
                        <div class="col-md-3 ">
                            <img src="img/9.png" alt="">
                            <h4>Home页</h4>

                        </div>
                        <div class="col-md-3">
                            <img src="img/13.png" alt="">
                            <h4>美团外卖</h4>
                        </div>



                        <div class="col-md-3 img1">
                            <img src="img/10.png" alt="" class="img1">
                            <h4>天涯明月刀网页</h4>

                        </div>



                    </div>
                </div>
            </div>
        </section>
        <footer>
            <div class="container">
                <div class="row">
                    <div class="col contact">
                        <h3>
                            <a name="lianxi">联系我</a>
                        </h3>
                        <p>
                            灵感 代码 梦想 未来
                        </p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-7 col-12 ipt">
                        <div class="use">
                            <input type="text" value="name">
                            <img src="img/3.png" alt="">
                        </div>
                        <div class="use">
                            <input type="email" value="email">
                            <img src="img/4.png" alt="">
                        </div>
                        <textarea name="" id="" cols="30" rows="10">message here</textarea>
                        <button>提交</button>
                    </div>
                    <div class="col-md-4 touch">
                        <h3>
                            保持联系
                        </h3>
                        <span class="spa">
                            Get In Touch
                        </span>
                        <ul>
                            <li>
                                <img src="img/5.png" alt="">
                                <span>河北省邯郸市</span>
                            </li>
                            <li>
                                <img src="img/6.png" alt="">
                                <span>
                                    15503028812
                                </span>
                            </li>
                            <li>
                                <img src="img/7.png" alt="">
                                <span>
                                    2242358711@qq.com
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </footer>
    </div>
    <script src="swiper-4.5.1/swiper-Swiper4/dist/js/swiper.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="js/script.js"></script>
</body>

</html>